<template>
  <div class="activity-list">
    <el-card class="stats-card" style="height: 140px;"> <!-- 减小卡片的上下长度 -->
      <div class="stats-row">
        <div class="stats-item">
          <p class="stats-label">全部活动</p>
          <p class="stats-value">{{ totalActivities }}</p>
        </div>
        <div class="stats-dotted-line"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">审核中</p>
          <p class="stats-value">{{ unpublishedActivities }}</p>
        </div>
        <div class="stats-dotted-line2"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">报名成功</p>
          <p class="stats-value">{{ activitiesInSignupPeriod }}</p>
        </div>
        <div class="stats-dotted-line3"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">报名失败</p>
          <p class="stats-value">{{ activitiesInProgress }}</p>
        </div>
      </div>
    </el-card>

    <div class="activity-entry">
      <div class="entry-wrapper">
        <!-- 左侧卡片：线上活动报名入口 -->
        <el-card class="custom-card" style="margin-top: 20px;">
          <div style="display: flex; justify-content: center; margin-top: 30px;">
            <el-button type="text" style="font-size: 25px; color: black; font-weight: bold;" @click="trunIntoOnline(true)">线上活动报名入口</el-button>
          </div>
          <!-- 这里放置线上活动的报名表单或其他内容 -->
        </el-card>
        <!-- 右侧卡片：线下活动报名入口 -->
        <el-card class="custom-card" style="margin-top: 20px;">
          <div style="display: flex; justify-content: center; margin-top: 30px;">
            <el-button type="text" style="font-size: 25px; color: black; font-weight: bold;" @click="trunIntoOnline(false)">线下活动报名入口</el-button>
          </div>
          <!-- 这里放置线下活动的报名表单或其他内容 -->
        </el-card>
      </div>
      <el-card class="hot-activities" style="margin-top: 20px;">
        <div style="display: flex; align-items: center;">
          <div style="flex: 1;">
            <h3 style="text-align:left;margin-top: -20px;font-size:30px">热点活动</h3>
            <p style="text-align: left;">活动详情：</p>
            <p v-html="detail"></p>
          </div>
          <div style="flex-shrink: 0;">
            <img v-if="imageUrl" :src="imageUrl" alt="活动图片" style="max-width: 150px; height: auto;" />
          </div>
        </div>
      </el-card>

      <!-- 排行榜 -->
      <el-card class="rank-card" style="margin-top: 20px; text-align: center;">
        <h3 style="margin-top: -10px">活动排行榜</h3>
        <el-divider style="background-color: transparent !important;"></el-divider>
        <div style="max-height: 300px; overflow-y: auto;">
          <el-table :data="activities" border style="width: 100%">
            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column prop="name" label="活动名称" width="100"></el-table-column>
            <el-table-column prop="activityNum" label="参与人数" width=100></el-table-column>
          </el-table>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script>

import {getJoinActivity, queryIfJoin, queryCheckStatus, getDetail} from '../../../../api/activity'
import {mapGetters} from 'vuex'
import {getActivityUrl} from '../../../../api/activityUrl'
export default {
  name: 's-activity',
  inject: ['reload'],
  computed: {
    totalActivities () {
      return this.activities.length
    },
    unpublishedActivities () {
      return this.activities.filter(activity => activity.IfCheck === 2).length
    },
    activitiesInSignupPeriod () {
      return this.activities.filter(activity => activity.IfCheck === 3).length
    },
    activitiesInProgress () {
      return this.activities.filter(activity => activity.IfCheck === 4).length
    },
    ...mapGetters({
      userRole: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    })
  },
  data () {
    return {
      activities: [],
      rankData: [],
      imageUrl: '',
      detail: ''
    }
  },
  created () {
    this.showActivity()
    // 调用后端接口获取活动数据，并将数据赋值给 activities
    // 例如，可以在此调用 this.getJoinActivity() 来获取已参加的活动数据
    // 通过接口获取数据并将数据赋值给 this.activities
  },
  mounted () {
  },
  methods: {
    trunIntoOnline (IF) {
      this.$router.push({ name: 'activityStudent', params: { id: IF } })
    },
    showDetail () {
      // 随机获取一个索引值
      const randomIndex = Math.floor(Math.random() * this.activities.length)
      // 从 activities 数组中获取随机的 activity 对象
      console.log(this.activities[randomIndex])
      const randomActivity = this.activities[randomIndex]
      // 获取随机活动的 ID
      const randomActivityId = randomActivity.id
      Promise.all([getDetail(randomActivityId), getActivityUrl(randomActivityId)])
        .then(([detailResult, urlResult]) => {
          console.log(detailResult)
          this.detail = detailResult.activityDescription
          this.imageUrl = urlResult[0].url // 获取第一个对象的 URL 属性
        })
    },
    formatDate (date) {
      const newDate = new Date(date)
      const year = newDate.getFullYear()
      const month = String(newDate.getMonth() + 1).padStart(2, '0')
      const day = String(newDate.getDate()).padStart(2, '0')
      return `${year}/${month}/${day}`
    },
    async showActivity () {
      const res = await getJoinActivity(this.userId)
      if (res && res.length > 0) {
        this.activities = res
        const activitiesIds = this.activities.map(activity => activity.id)

        // 获取每个活动的报名情况
        const checkStatus = await Promise.all(
          activitiesIds.map(activityId => queryCheckStatus(this.userId, activityId))
        )
        const ifJoinStatus = await Promise.all(
          activitiesIds.map(activityId => queryIfJoin(this.userId, activityId))
        )

        this.activities.forEach((activity, index) => {
          this.$set(activity, 'IfCheck', checkStatus[index])
          this.$set(activity, 'IfJoin', ifJoinStatus[index])
        })

        // 选择第一个活动获取详情，你也可以在界面上选择显示哪个活动的详情
        if (this.activities.length > 0) {
          const randomActivityId = this.activities[0].id
          const [detailResult, urlResult] = await Promise.all([
            getDetail(randomActivityId),
            getActivityUrl(randomActivityId)
          ])
          this.detail = detailResult.activityDescription
          this.imageUrl = urlResult[0].url
        }
      } else {
      }
    }
  }
}
</script>

<style scoped>
.el-divider__text{
  background-color: transparent;
}
.activity-list {
  padding: 20px;
}
.hot-activities {
  width: 430px; /* 让卡片占据一半的宽度，考虑间距 */
  padding: 20px;
  height: 390px;
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
  color: #495060;
  /* 添加左右边距 */
  margin-left: 20px;
  margin-right: 20px;
}
.activity-entry {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.el-table th.el-table__cell{
  background-color: transparent;
}
.entry-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 样式可以根据实际需求进行调整 */
.custom-card {
  width: 300px; /* 让卡片占据一半的宽度，考虑间距 */
  padding: 20px;
  height: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
  color: #495060;
}
.rank-card {
  width: 350px ;
  padding: 10px;
  height: 410px;
  border-radius: 8px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
  color: #495060;
}
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}

.el-table::before {//去除底部白线
left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.stats-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px; /* 减小卡片的上下长度 */
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 200px; /* 调整字段之间的间距 */
  position: relative;
}

.stats-item {
  text-align: center;
}

/* 新增样式用于虚线 */
.stats-dotted-line {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(20% - 1px); /* 将虚线置于两字段之间的中间位置 */
}

.stats-dotted-line2 {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px); /* 将虚线置于两字段之间的中间位置 */
}
.stats-dotted-line3 {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(80% - 1px); /* 将虚线置于两字段之间的中间位置 */
}
.stats-label {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px; /* 调整字段与数字之间的间距 */
}

.stats-value {
  font-size: 32px;
  font-weight: bold;
}

</style>
